<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.rolling.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<script>
$(function() {
	eval($('#code').text());
});	

function reverse(rollingDivId) {
	$("#" + rollingDivId).reverseRolling();
}

var startMouseEventTime = 0
var endMouseEventTime = 0
var startMouseEvnetX = -1;
var endMouseEventX = -1;

function normal() {
	var rollingDiv = $("#rollingDiv");
	var rollingAnimationFrame = rollingDiv.getRollingAnimationFrame();
	if (rollingAnimationFrame < 100) {
		rollingAnimationFrame += 10;
	} else {
		rollingAnimationFrame = 100;
	}
	$("#commentDiv").text("rollingAnimationFrame: " + rollingAnimationFrame);
	rollingDiv.setRollingAnimationFrame(rollingAnimationFrame);
	setTimeout('normal()', 1000);	
}	

</script>
<body>
<h2>Mouse Event3</h2>
Mouse drag, change rolling direction and animation speed.<br>
Motivated by Kevin Cheung's interactive banner.
<hr>
<div id="rollingDiv"></div>
<div id="commentDiv"></div>
<hr>
<h2>Script</h2>
<xmp id='code'>
	var rollingDiv = $("#rollingDiv");	
	rollingDiv.rolling("right", 130, 100, 5);
	
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ayjjsallNwc' target='_new'><img src='http://i.ytimg.com/vi/ayjjsallNwc/default.jpg' width='130' height='100' alt='1 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=pe-MIDDfckw' target='_new'><img src='http://i.ytimg.com/vi/pe-MIDDfckw/default.jpg' width='130' height='100' alt='2 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=AyRIvX25vRQ' target='_new'><img src='http://i.ytimg.com/vi/AyRIvX25vRQ/default.jpg' width='130' height='100' alt='3 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=GxplDa3M5Io' target='_new'><img src='http://i.ytimg.com/vi/GxplDa3M5Io/default.jpg' width='130' height='100' alt='4 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=v6MKOY9x_ds' target='_new'><img src='http://i.ytimg.com/vi/v6MKOY9x_ds/default.jpg' width='130' height='100' alt='5 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=ZBDD7aLd6lc' target='_new'><img src='http://i.ytimg.com/vi/ZBDD7aLd6lc/default.jpg' width='130' height='100' alt='6 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=et-dNoTi8IY' target='_new'><img src='http://i.ytimg.com/vi/et-dNoTi8IY/default.jpg' width='130' height='100' alt='7 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=mX1xyxWkmw0' target='_new'><img src='http://i.ytimg.com/vi/mX1xyxWkmw0/default.jpg' width='130' height='100' alt='8 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=fRWov2pdJkE' target='_new'><img src='http://i.ytimg.com/vi/fRWov2pdJkE/default.jpg' width='130' height='100' alt='9 item' border='0'/></a>");
	rollingDiv.addRollingItem("<a href='http://www.youtube.com/watch?v=QCmP4bEJfOg' target='_new'><img src='http://i.ytimg.com/vi/QCmP4bEJfOg/default.jpg' width='130' height='100' alt='10 item' border='0'/></a>")
   
   rollingDiv.mousedown(function(e) {
   	startMouseEvnetX = e.pageX
   	lastMouseEventTime = (new Date()).getTime();
   	startMouseEventTime = lastMouseEventTime;   	
   });
   
   rollingDiv.mouseup(function(e) {
   	startMouseEvnetX = -1;
   });
   
   rollingDiv.mousemove(function(e) {
   	if (startMouseEvnetX == -1) {
   		return;
   	}
   	
   	//if ((new Date()).getTime() - lastMouseEventTime > 300) {
   	//	return;
   	//}
   	
   	if (Math.abs(e.pageX - startMouseEvnetX) > 5) {
			endMouseEventX = e.pageX;
			endMouseEventTime = (new Date()).getTime();
						
			var rollingAnimationFrame = endMouseEventTime - startMouseEventTime;
			rollingAnimationFrame = rollingAnimationFrame - rollingAnimationFrame%10;		
			rollingAnimationFrame /= 5;
					
			if (rollingAnimationFrame < 15) {
				rollingAnimationFrame = 15;
			}

			$(this).setRollingAnimationFrame(rollingAnimationFrame);
			
			if (endMouseEventX - startMouseEvnetX > 0) {
				if ($(this).getRollingDirection() == "left") {
					$(this).reverseRolling();
				}
			} else {
				if ($(this).getRollingDirection() == "right") {
					$(this).reverseRolling();
				}
			}
			
			startMouseEvnetX = -1;	
		}
		
	});
	
   rollingDiv.startRolling(20, 0, 100);	
   
   setTimeout('normal()', 1000);
</xmp>
</body>